<template>
  <f7-page>
    <f7-navbar title="最新动态" back-link="返回"></f7-navbar>

    <div class="swiper-box">
      <div class="swiper-inner">
        <f7-swiper v-if="banners.length > 0" pagination :params="swiperParams">
          <f7-swiper-slide v-for="(item, index) in banners" :key="index">
            <img :src="item.pic" alt="">
          </f7-swiper-slide>
        </f7-swiper>
      </div>
    </div>
    <van-tabs class="tabs-con" v-model="active" :border="false" @change="init">
      <van-tab title="平台公告"></van-tab>
      <van-tab title="新闻资讯"></van-tab>
    </van-tabs>
    
    <div class="news-list">
      <f7-link :href="`/article-details/?type=${active}&id=${item.id}`" class="new-item" v-for="(item, index) in articleList" :key="index">
        <img :src="item.image" alt="">
        <div>
          <h3>{{item.title}}</h3>
          <p>{{item.content}}</p>
          <span>发布时间：{{$moment(item.add_time * 1000).format('YYYY-MM-DD')}}</span>
        </div>
      </f7-link>
    </div>
  </f7-page>
</template>

<script>
  import { getArticleList, getArtBnnerList } from "../api/home";

  export default {
    name: "latest-news",
    data() {
      return {
        swiperParams: {
          observer: true,
          observeParents: true,
          autoplay: {
            delay: 3000
          },
          loop: true
        },
        active: 0,
        banners: [],
        articleList: []
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        getArtBnnerList().then(res => {
          this.banners = res.data;
        });
        getArticleList({}, this.active).then(res => {
          this.articleList = res.data;
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .swiper-box {
    margin-top: 40px;
  }
  .tabs-con {
    margin: 20px 0;
  }
  .news-list {
    padding: $padding;
    .new-item {
      color: $mainColor;
      display: flex;
      background: url("../assets/xw_001.png") no-repeat center top;
      background-size: 100% 100%;
      padding: 35px;
      align-items: center;
      img {
        width: 180px;
        height: 120px;
        margin-right: $padding;
      }
      > div {
        flex: 1;
        overflow: hidden;
        h3 {
          color:rgba(72,37,199,1);
          background:linear-gradient(57deg,rgba(72,166,199,1) 0%, rgba(87,225,255,1) 100%);
          -webkit-background-clip:text;
          -webkit-text-fill-color:transparent;
          font-size: 23px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        p {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          color:rgba(72,37,199,1);
          font-size: 20px;
          margin: 10px 0;
          background:linear-gradient(57deg,rgba(72,166,199,1) 0%, rgba(87,225,255,1) 100%);
          -webkit-background-clip:text;
          -webkit-text-fill-color:transparent;
        }
        span {
          font-size: 18px;
        }
      }
    }
  }
</style>